<template>
  <a @click="dialog = true">
    <span>明细</span>
    <a-modal v-model="dialog" title="明细" @ok="submit" :width="1000">
      <p class="left-1">总金额：{{ moneyType(total) }}</p>
      <a-table rowKey="projectNum" :columns="columns" :data-source="data" :pagination="pagination">
        <span slot="date" slot-scope="date"> {{ humanizeDate(date) }}</span>
        <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
        <span slot="calcDate" slot-scope="calcDate"> {{ humanizeDate(calcDate) }}</span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)">查看</a>
        </span>
      </a-table>
    </a-modal>
  </a>
</template>
<script>
import moment from 'moment'
import { getWithdraw } from '@/api/common'
export default {
  name: 'detail',
  props: ['record'],
  data() {
    return {
      total: '',
      dialog: false,
      form: {
        data: ''
      },
      columns: [
        {
          title: '编号',
          dataIndex: 'projectNum',
          key: 'projectNum'
        },
        {
          title: '客户',
          dataIndex: 'clientName',
          key: 'clientName'
        },
        {
          title: '项目名称',
          dataIndex: 'addr',
          key: 'addr'
        },
        {
          title: '阶段',
          dataIndex: 'stage',
          key: 'stage'
        },
        {
          title: '律师',
          dataIndex: 'lawyerName',
          key: 'lawyerName'
        },
        {
          title: '提款日期',
          dataIndex: 'date',
          key: 'date',
          scopedSlots: { customRender: 'date' }
        },
        {
          title: '计算日期',
          dataIndex: 'calcDate',
          key: 'calcDate',
          scopedSlots: { customRender: 'calcDate' }
        },
        {
          title: '货币',
          dataIndex: 'currency',
          key: 'currency'
        },
        {
          title: '性质',
          dataIndex: 'nature',
          key: 'nature',
          scopedSlots: { customRender: 'nature' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '金额',
          dataIndex: 'amount',
          key: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  watch: {
    dialog(v) {
      if (this.dialog) {
        this.getData()
      }
    }
  },
  methods: {
    submit() {
      this.dialog = false
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    toDetail(record) {
      this.$router.push({ name: 'manage/detail', query: { id: record.projectId } })
    },
    async getData(page = 1) {
      const _form = {
        page,
        limit: this.pagination.pageSize,
        arrangeId: this.record.id
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      const res = await getWithdraw(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list.map((el, i) => {
        el.index = i
        return el
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
